<template>
	<view class="container">
		<slider @change="myChangeHandler" activeColor="red" backgroundColor="#b0e0e6" block-color="#18bc37"
			block-size="20" />
		<checkbox-group name="" @change="myChangeHandler">
			<label>
				<checkbox :value="大学语文" /><text>1212</text>
			</label>
			<label>
				<checkbox :value="数学" /><text>12313321</text>
			</label>
			<label>
				<checkbox :value="跨平台" style="transform: scale(1.5);" /><text>123313</text>
			</label>
		</checkbox-group>
		<radio-group name="" @change="myChangeHandler">
			<label>
				<radio :value="男" /><text>男</text>
			</label>
			<label>
				<radio :value="女" /><text>女</text>
			</label>
		</radio-group>
		<picker :range="list" @change="myChangeHandler">
			<text>请选择你的国庆去处: {{selectedIndex==-1? '---请选择---' :list[selectedIndex]}}</text>
		</picker>
		<picker :range="skills" @change="myChangeHandler">
			<view>你最喜欢的运动：{{selectedSkillIndex == -1 ? '---请选择---' : skills[selectedSkillIndex]}}</view>
		</picker>
		<picker mode="multiSelector" :range="multiArray" @change="myChangeHandler">
			<view>
				请选择城市：{{multiArray[0][multiSelected[0]] +'==='+ multiArray[1][multiSelected[1]] +'===='+ multiArray[2][multiSelected[2]]}}
			</view>
		</picker>

		<picker mode="time" start="9:00" end="12:00" @change="timeChange">
			<view> 预约时间：{{selectedTime}}</view>
		</picker>
		<switch checked="true" @change="switchChange" />
		<uni-combex label="国庆去处" :candidates="list" placeholder="请选择" v-model="place"></uni-combex>
	</view>
</template>

<script>
	export default {
		data() {

			return {
				place: '',
				selectedTime: '',
				multiSelected: [0, 0, 0],
				multiArray: [
					['亚洲', '欧洲'],
					['中国', '日本', '越南'],
					['北京', '上海', '长沙']
				],

				list: ['岳阳楼', '洞庭湖', '天心阁', '岳麓山'],
				selectedIndex: -1,
				skills: ['足球', '篮球', '乒乓球', '羽毛球'],
				selectedSkillIndex: -1
			}
		},
		methods: {
			switchChange(e) {
				console.log(e.detail.value);
			},
			myColumnChangeHandler(e) {
				console.log(e);
				this.multiSelected[e.datail.column] = e.detail.value
				this.$forceUpdate()
				// this.$set(this.multiSelected)
			},
			myChangeHandler(e) {
				console.log(e);
				console.log(e.detail.value);
				// this.selectedIndex = e.detail.value
				// this.selectedSillIndex = e.detail.value
				this.multiSelected = e.detail.value
			}
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style>